<template>
  <div
    v-if="curSpace.quickTags.length || isWebAdmin || isSpaceOwner || isSpaceAdmin"
    class="flex align-items-center"
  >
    标签筛选
    <el-divider v-if="curSpace.quickTags.length" direction="vertical" />
    <tag-filter v-for="tag in curSpace.quickTags" :key="tag" :title="tag" />
    <template v-if="isWebAdmin || isSpaceOwner || isSpaceAdmin">
      <el-divider direction="vertical" />
      <i
        class="el-icon-setting pointer f-normal hover-primary"
        title="自定义快捷标签筛选"
        @click="dialogVisible = true"
      />
    </template>
    <settings-quick-tags-dialog :dialog-visible.sync="dialogVisible" />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import TagFilter from '@/components/shared/tag-filter';
import SettingsQuickTagsDialog from './settings-quick-tags-dialog';

export default {
  name: 'list-quick-tags', // 资源列表'全部'列表的自定义快捷标签
  components: { TagFilter, SettingsQuickTagsDialog },
  data() {
    return {
      dialogVisible: false,
    };
  },
  computed: {
    ...mapState({ curSpace: 'currentSpace' }),
    ...mapGetters(['isWebAdmin', 'isSpaceOwner', 'isSpaceAdmin']),
  },
};
</script>

<style></style>
